<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" ref="listRef">
        <van-cell v-for="{ sales, originprice, discount, proname, img1, proid } in productList">
            <van-card :num="sales" :price="(originprice * discount / 10).toFixed(2)" :title="proname" :thumb="img1"
                :lazy-load="true" @click="acc(proid)" />
        </van-cell>
    </van-list>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// pinia内部方法用于解构(避免失去响应式)
import { storeToRefs } from 'pinia'
// 导入 pinia
import { useProductStore } from '../stores/product'

const router = useRouter()
const loading = ref(false);
const finished = ref(false);

const store = useProductStore()
// 1. 使用方式1 直接使用 store
// <div>{{ store. productList}}</div>
// 2. 使用 storeToRefs 解构
const { productList, count, flag, homeScrollTop } = storeToRefs(store)

const onLoad = async () => {

    // let scrollTop = document.querySelector('.ddd')
    await store.fetchList()

    count.value++

    finished.value = flag.value;

    loading.value = false;
}
// 跳转商品详情页面
const acc = async (proid: string) => {
    // 跳转的时候带上id
    router.push(`/product/${proid}`)
}
</script>

<style scoped>
.load {
    height: 100vh;
}

.add {
    display: flex;
    height: 100px;
    background-color: #F7F8FA;
}

.add>h4 {
    color: #000;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.img-div {
    width: 150px;
}

.img-div>img {
    width: 100%;
    /* height: 100%; */
}

.img {
    display: block;
    width: 80px;
}
</style>